<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>页签之样式 - jQuery EasyUI 演示</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2 title="Tabs Style">页签之样式</h2>
	<p title="Click the options below to change the tabs style.">　　点击以下选项即可改变页签的样式。</p>
	<div style="margin:20px 0;">
		<input id="plain" type="checkbox" onclick="setTabs()"><span>简约　plain</span>　　
		<input id="narrow" type="checkbox" onclick="setTabs()"><span>紧靠　narrow</span>　　
		<input id="pill" type="checkbox" onclick="setTabs()"><span>浮岛　pill</span>　　
		<input id="justified" type="checkbox" onclick="setTabs()"><span>两端对齐　justified</span>
	</div>
	<div id="tt" class="easyui-tabs" style="width:700px;height:250px">
		<div title="关于" style="padding:10px">
			<p style="font-size:14px">有了 jQuery EasyUI 框架，构建网页如虎添翼。</p>
			<ul>
				<li>easyui 是一系列基于 jQuery 用户接口插件的集合。</li>
				<li>easyui 提供构建现代交互 javascript 应用的必备功能。</li>
				<li>有了 easyui 之后不必再狂写 javascript 代码，通常只写些 HTML 标记来定义用户接口即可。</li>
				<li>HTML5 网页的完整框架。</li>
				<li>easyui 开发应用，省时省工。</li>
				<li>easyui 简于形而强于心。</li>
			</ul>
		</div>
		<div title="我的文档" style="padding:10px">
			<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
		</div>
		<div title="帮助" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
			此乃帮助之内容……
		</div>
	</div>
	<script type="text/javascript">
		function setTabs(){
			$('#tt').tabs({
				plain: $('#plain').is(':checked'),
				narrow: $('#narrow').is(':checked'),
				pill: $('#pill').is(':checked'),
				justified: $('#justified').is(':checked')
			})
		}
	</script>
</body>
</html>